<template>
  <div class="list xui-margin-right-sm">
    <router-link :to="href">
      <div class="list__img xui-margin-xs">
        <img-box
          :width="202"
          :height="212"
          :imgSrc="item.coverUrl"
        >
        </img-box>
      </div>
      <div class="list__text">
        <h4 class="xui-text-truncate">{{item.title}}</h4>
        <span v-for="(item,index) in info" :key="index" class="xui-text-truncate-line-2">{{item}}</span>
        <p class="xui-text-truncate-line-2">{{intro | truncate(30)}}</p>
      </div>
    </router-link>
  </div>
</template>

<script>
import ImgBox from "@/components/widge/img-box";
import { filterHTMLTag } from "@/utils";
export default {
  components: {
    "img-box": ImgBox
  },
  props: {
    item: Object,
    href: String
  },
  computed: {
    intro() {
      if (this.item.content) return filterHTMLTag(this.item.content);
    },
    info() {
      if (this.item.contentSummary) {
        return this.item.contentSummary.split("\n").slice(0, 3);
      } else {
        return false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.list {
  width: 448px;
  height: 228px;
  position: relative;
  /*margin-right: 30px;*/
  margin-top: 20px;
  float: left;
  overflow: hidden;
}

.list:nth-child(even) {
  margin-right: 0;
}

.list a {
  width: 448px;
  height: 228px;
  display: block;
  cursor: pointer;
  border: 2px solid #d2d2d2;
}

.list > a > div {
  float: left;
}

.list a:hover {
  border: 2px solid #dea630;
}

.list .list__text {
  width: calc(~"100% - 240px");
  position: absolute;
  top: 0;
  right: 20px;
}

.list .list__text h4 {
  font-size: 18px;
  font-weight: normal;
  margin-top: 20px;
  margin-bottom: 15px;
}

.list .list__text span,
p {
  font-size: 14px;
  color: #b4b4b4;
}

.list .list__text span {
  margin-bottom: 5px;
  background: url("../../assets/images/list/dot.png") no-repeat left 7px;
  padding-left: 15px;
}
</style>


